<template>
    <div v-fullpage:myFullpage="options">
        <!-- 第一屏 -->
        <div
            class="section"
            data-header="default"
            :style="{
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="flow-wrap">
                <div
                    class="flow-left hide"
                    :class="[{ turnUp: moduleShow.flow }]"
                >
                    <div class="top-title">流量</div>
                    <div class="sub-title">掌上大学APP</div>
                    <div class="content">
                        <p class="describe first">
                            1.行业<i class="point">唯一的</i>大学生专属商城
                        </p>
                        <p class="describe">
                            2.全部商品<i class="point">学生价</i>
                        </p>
                        <p class="describe">
                            3.自营商城对客户的<i class="point">流量扶持</i>
                        </p>
                    </div>
                </div>
                <div
                    class="flow-right hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/solution/solution1.png)'
                    }"
                    :class="[{ turnDown: moduleShow.flow }]"
                ></div>
            </div>
            <btn-join title="抢先一步,开通校园事业部" />
        </div>
        <!-- 第一屏结束 -->
        <!-- 第二屏 -->
        <div
            class="section"
            data-header="default"
            :style="{
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="effect-wrap">
                <div
                    class="effect-left hide"
                    :class="[{ turnUp: moduleShow.transform }]"
                >
                    <div class="top-title">转化</div>
                    <div class="sub-title">校园代理线下互动转化</div>
                    <div class="content">
                        <p class="describe first">
                            1.校园代理承接<i class="point">商城客服工作</i>
                        </p>
                        <p class="describe">
                            2.到寝室演示产品销售<i class="point">转化</i>
                        </p>
                        <p class="describe">
                            3.比直播更深动的<i class="point">互动机会+寝室6人</i
                            >的销售机会
                        </p>
                    </div>
                </div>
                <div
                    class="effect-right hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/solution/solution2.png)'
                    }"
                    :class="[{ turnDown: moduleShow.transform }]"
                ></div>
            </div>
            <btn-join title="抢先一步,开通校园事业部"></btn-join>
        </div>
        <!-- 第三屏结束 -->
        <!-- 第三屏 -->
        <div
            class="section"
            data-header="default"
            :style="{
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="transform-wrap">
                <div
                    class="transform-left hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/solution/solution3.png)'
                    }"
                    :class="[{ turnDown: moduleShow.effect }]"
                ></div>
                <div
                    class="transform-right hide"
                    :class="[{ turnUp: moduleShow.effect }]"
                >
                    <div class="top-title">品牌</div>
                    <div class="sub-title">多品牌联动低价共享成果</div>
                    <div class="content">
                        <p class="describe first">
                            1.多个品牌共同<i class="point">推挤福利</i>
                        </p>
                        <p class="describe">
                            2.多个品牌共同<i class="point">均摊成本</i>
                        </p>
                        <p class="describe">
                            3.多个品牌互相<i class="point">流量导入</i>
                        </p>
                    </div>
                </div>
            </div>
            <btn-join title="抢先一步,开通校园事业部"></btn-join>
        </div>
        <!-- 第三屏结束 -->
    </div>
</template>

<script>
import buttonHover from '@/components/common/button-hover'
import btnJoin from '@/components/common/btn-join'
export default {
    components: { btnJoin },
    data() {
        return {
            firstShow: false,
            moduleShow: {
                flow: false,
                transform: false,
                effect: false
            },
            options: {
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                navigation: false,
                scrollBar: false,
                scrollOverflow: true,
                paddingTop: '70px',
                anchors: ['flow', 'transform', 'effect'],
                css3: true,
                controlArrows: false,
                afterLoad: this.afterLoad,
                afterRender() {},
                afterResize(...args) {
                    // console.log('resize', args)
                }
            },
            products: [
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo1.png',
                    title: '掌上大学APP',
                    desc: '开创学生价商城',
                    color:
                        'linear-gradient(135deg,rgba(251,73,107,1) 0%,rgba(245,35,57,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo2.png',
                    title: '大数据系统',
                    desc: '全国各大高校的大学生数据分析系统',
                    color:
                        'linear-gradient(135deg,rgba(57,80,248,1) 0%,rgba(25,76,247,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo3.png',
                    title: '全国媒介系统',
                    desc: '全国2400所高校媒介资源，行业成本价投放',
                    color:
                        'linear-gradient(135deg,rgba(140,87,247,1) 0%,rgba(104,35,245,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo4.png',
                    title: '工作反馈系统',
                    desc: '实时掌握校园代理工作过程、项目进度及时反馈',
                    color:
                        'linear-gradient(135deg,rgba(251,210,73,1) 0%,rgba(245,166,35,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo5.png',
                    title: '校园内参',
                    desc: '7年经验沉淀，快速帮助企业缩小打入大学生群体的成本',
                    color:
                        'linear-gradient(135deg,rgba(67,206,255,1) 0%,rgba(32,160,255,1) 100%)'
                }
            ]
        }
    },
    created() {
        if (!process.server) {
            this.$store.commit('header/setStyle', 'default')
        }
    },
    mounted() {
        this.firstShow = true
    },
    methods: {
        onLeave(from, to, direction) {
            this.firstShow = true
            if (to.item.dataset.header == 'dark') {
                this.$store.commit('header/setStyle', 'dark')
            } else {
                this.$store.commit('header/setStyle', 'default')
            }
        },
        afterLoad(from, to, direction) {
            this.firstShow = true
            this.moduleShow[to.anchor] = true
        },
        fnGopage() {}
    }
}
</script>

<style lang="less" scoped>
.section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity linear 0.2s;
    background-color: #fff;
}
@keyframes turnUp {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes turnDown {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.hide {
    opacity: 0;
}
.turnUp {
    animation: turnUp 0.6s ease-out;
    opacity: 1;
}
.turnDown {
    animation: turnDown 0.6s ease-out;
    opacity: 1;
}
.flow-wrap,
.effect-wrap,
.transform-wrap {
    min-width: 12rem;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flow,
.effect {
    &-right {
        width: 56%;
        height: 0;
        padding-top: 43%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    &-left {
        width: 44%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 10%;
    }
}
.transform {
    &-left {
        width: 56%;
        height: 0;
        padding-top: 43%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    &-right {
        width: 44%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 10%;
    }
}

.product-title {
    height: 32px;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
}
.product-desc {
    margin-top: 32px;
    width: 320px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
}
.product-button {
    margin-top: 48px;
}
.t-process {
    height: 140px;
    font-size: 100px;
    color: #ebebeb;
    line-height: 140px;
}
.t-tit {
    height: 45px;
    position: absolute;
    bottom: 7px;
    font-size: 32px;
    color: #3f454b;
    line-height: 45px;
}
.top-title {
    height: 125px;
    font-size: 100px;
    font-weight: 600;
    color: rgba(235, 235, 235, 1);
    line-height: 125px;
}
.sub-title {
    height: 45px;
    font-size: 32px;
    font-weight: 600;
    color: rgba(63, 69, 75, 1);
    line-height: 45px;
    margin-top: -45px;
}
.content {
    .describe {
        height: 24px;
        margin: 15px 0;
        font-size: 18px;
        font-weight: 500;
        color: #999;
        line-height: 24px;
        .point {
            font-style: normal;
            color: #20a0ff;
        }
    }
    .first {
        margin-top: 40px;
    }
}
</style>
